<template>
  <view class="top">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="backPage">
      <view class="back-icon"></view>
    </view>
    <!-- 页面标题 -->
    <view style="color: white; text-align: center; margin-bottom: 30rpx;">
      卡券管理
    </view>
    <!-- 新增优惠券按钮 -->
    <button class="btn" @click="toAddCoupon">
      <image src="/static/加号@2x.png" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"></image>
      新增优惠券
    </button>
  </view>
  <!-- 卡券列表容器 -->
  <uni-card class="card">
    <uni-section>
      <!-- 分段控制栏 -->
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
          style="border-radius: 80rpx;"
        />
      </view>
      <!-- 卡券内容区域 -->
      <view class="content">
        <!-- 进行中卡券 -->
        <view v-if="current === 0">
          <view
            class="items mb20"
            v-for="item in activeCoupons"
            :key="item.id"
            :class="item.status === 0? 'active-item' : 'expired-item'"
          >
            <!-- 左侧优惠信息 -->
            <view class="items_left">
              <view class="items_left_top mb30">
                满{{ item.triggerMoney }}元可用
              </view>
              <view class="items_left_bottom">
                <text style="font-size: 35rpx; margin-right: 5rpx;">
                  {{ item.discount!== null? '' : '¥' }}
                </text>
                {{
                  item.discount!== null
                   ? item.discount
                    : item.preferentialMoney
                }}
                <text style="font-size: 35rpx; margin-left: 5rpx;">
                  {{ item.discount!== null? '折' : '' }}
                </text>
              </view>
            </view>
            <!-- 右侧详情信息 -->
            <view class="items_right">
              <view class="items_right_top" style="color: #333; margin-bottom: 10rpx;">
                优惠券名称：{{ item.name }}
              </view>
              <view class="items_right_mid mb20" style="color: #666; font-size: 24rpx;">
				发放有效期{{ formatDate(item.start) }} - {{ formatDate(item.end) }}<br>
                有效期：{{ formatDate(item.expirationStart) }} - {{ formatDate(item.expirationEnd) }}
              </view>
              <view class="items_right_bottom" style="color: #666; font-size: 24rpx; display: flex; justify-content: space-between; align-items: center;">
                <view>剩余数量：{{ item.num }}张</view>
                <view v-if="item.status === 1" class="status-tag">已过期</view>
                <button v-if="item.status !== 1" @click="() => youhuiEnd(item)">结束</button> <!-- 仅状态正常时显示结束按钮 -->
              </view>
            </view>
          </view>
          <!-- 空状态提示 -->
          <view v-if="activeCoupons.length === 0" class="empty-tip">
            暂无进行中的优惠券
          </view>
        </view>
        <!-- 已结束卡券 -->
        <view v-if="current === 1">
          <view
            class="items mb20"
            v-for="item in expiredCoupons"
            :key="item.id"
            :class="item.status === 1? 'expired-item' : 'active-item'"
          >
            <!-- 右侧详情信息（已过期样式） -->
            <view class="items_right2">
              <view class="items_right_top" style="color: #999; margin-bottom: 10rpx;">
                优惠券名称：{{ item.name }}
              </view>
              <view class="items_right_mid mb20" style="color: #999; font-size: 24rpx;">
				  发放有效期{{ formatDate(item.start) }} - {{ formatDate(item.end) }}<br>
                有效期：{{ formatDate(item.expirationStart) }} - {{ formatDate(item.expirationEnd) }}
              </view>
              <view class="items_right_bottom" style="display: flex; align-items: center;">
                <!-- 新增数量为0的状态提示 -->
                <view class="items_right_bottom_left" style="color: #999; margin-right: 20rpx;">
                  {{ 
                    item.status === 1 ? '已结束' : 
                    item.num === 0 ? '已领完' : 
                    '已过期' 
                  }} <!-- 根据不同条件显示状态 -->
                </view>
                <image src="/static/已结束.png" style="width: 140rpx; height: 60rpx;"></image>
                <button @click="() => youhuiDel(item)">删除</button>
              </view>
            </view>
          </view>
          <!-- 空状态提示 -->
          <view v-if="expiredCoupons.length === 0" class="empty-tip">
            暂无已结束或已领完的优惠券
          </view>
        </view>
      </view>
    </uni-section>
  </uni-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request.js';

// 响应式数据定义
const current = ref(0); // 当前选中的分段索引
const items = ref(['进行中', '已结束']); // 分段标题
const activeColor = ref('#007AFF'); // 激活状态颜色
const styleType = ref('button'); // 分段样式类型

// 优惠券数据
const coupons = ref([]); // 原始数据
const activeCoupons = ref([]); // 进行中（未过期）
const expiredCoupons = ref([]); // 已结束（已过期/已领完/已结束）

// 日期格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return '--';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 获取优惠券列表
const getCoupons = () => {
  request({
    url: '/xsc/coupon/list', // 实际接口地址
    method: 'GET',
    data: {
      pageNum: 1, // 页码
      pageSize: 100 // 每页数量
    },
    success(res) {
      if (res.data && res.data.code === 200) {
        coupons.value = res.data.rows || [];
        
        // 获取当前时间（时间戳，单位：毫秒）
        const now = Date.now();
        
        // 过滤进行中优惠券：状态正常、未过期、数量>0
        activeCoupons.value = coupons.value.filter(item => {
          return (
            item.status !== 1 && // 状态为正常
            new Date(item.end).getTime() > now && // 未过期
            item.num > 0 // 剩余数量>0
          );
        });

        // 过滤已结束优惠券：状态已结束、已过期、数量为0
        expiredCoupons.value = coupons.value.filter(item => {
          return (
            item.status === 1 || // 状态为已结束
            new Date(item.end).getTime() <= now || // 已过期
            item.num === 0 // 剩余数量为0
          );
        });
      } else {
        uni.showToast({
          title: res.data?.msg || '获取优惠券失败',
          icon: 'none'
        });
      }
    },
    fail(err) {
      console.error('请求失败:', err);
      uni.showToast({
        title: '网络请求失败',
        icon: 'none'
      });
    }
  });
};

// 生命周期钩子 - 页面加载时获取数据
onMounted(() => {
  getCoupons();
});

// 页面返回函数
const backPage = () => {
  uni.navigateTo({
    url: '/pages/index/index' // 实际路由地址
  });
};

// 跳转至新增优惠券页面
const toAddCoupon = () => {
  uni.navigateTo({
    url: '/pages/index/kaquan/coupon/coupon' // 实际路由地址
  });
};

// 分段切换事件处理
const onClickItem = (e) => {
  current.value = e.currentIndex;
};

// 定义修改优惠券状态为已结束的方法
const youhuiEnd = (item) => {
  request({
    url: 'xsc/coupon', 
    method: 'PUT',
    data: {
      id: item.id, 
      status: 1 // 将状态设为1表示已结束
    },
    success(res) {
      if (res.data && res.data.code === 200) {
        uni.showToast({ title: '优惠券已结束', icon:'success' });
        // 重新获取优惠券列表，更新页面显示
        getCoupons();
      } else {
        uni.showToast({ title: res.data?.msg || '操作失败', icon: 'none' });
      }
    },
    fail(err) {
      console.error('请求失败:', err);
      uni.showToast({ title: '网络请求失败', icon: 'none' });
    }
  });
};

// 定义删除优惠券的方法
const youhuiDel = (item) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除该优惠券吗？',
    success: (res) => {
      if (res.confirm) {
        request({
          url: 'xsc/coupon/' + item.id, // 假设的删除接口，实际需按后端定义
          method: 'DELETE',
          success: (res) => {
            if (res.data && res.data.code === 200) {
              uni.showToast({ title: '优惠券已删除', icon:'success' });
              // 重新获取优惠券列表，更新页面显示
              getCoupons();
            } else {
              uni.showToast({ title: res.data?.msg || '删除失败', icon: 'none' });
            }
          },
          fail: (err) => {
            console.error('请求失败:', err);
            uni.showToast({ title: '网络请求失败', icon: 'none' });
          }
        });
      }
    }
  });
};
</script>

<style scoped>
@import url('@/common/app.css');

/* 公共样式 */
.mb20 { margin-bottom: 20rpx; }
.mb30 { margin-bottom: 30rpx; }
.empty-tip { padding: 30rpx; text-align: center; color: #999; }

/* 顶部栏样式 */
.top {
  background-color: #007AFF;
  padding: 40rpx 20rpx;
  color: white;
}

.back-btn {
  position: absolute;
  left: 20rpx;
  top: 40rpx;
  width: 50rpx;
  height: 50rpx;
}

.back-icon {
  position: relative;
  width: 30rpx;
  height: 30rpx;
}

.back-icon::before,
.back-icon::after {
  content: '';
  position: absolute;
  background-color: #fff;
}

.back-icon::before {
  width: 20rpx;
  height: 2rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.back-icon::after {
  width: 20rpx;
  height: 2rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 按钮样式 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80rpx;
  margin: 0 auto 30rpx;
  background-color: #FFFFFF;
  border-radius: 100rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 卡券列表样式 */
.card {
  margin: -30rpx 20rpx 0;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
}

.items {
  display: flex;
  align-items: stretch;
  background-color: #FFFFFF;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.items_left{
	flex: 0 0 20%;
	padding: 30rpx 20rpx;
	text-align: center;
	color: white;
}
.items_left2 {
  flex: 0 0 30%;
  padding: 30rpx 20rpx;
  text-align: center;
  color: white;
}

.items_left { background-color: #FF7531; }
.items_left2 { background-color: #FFBB99; }

.items_left_top { font-size: 28rpx; }
.items_left_bottom {
  font-size: 60rpx;
  font-weight: bold;
  margin-top: 10rpx;
}

.items_right {
	flex: 0 0 70%;
	padding: 30rpx 25rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.items_right2 {
  flex: 0 0 100%;
  padding: 30rpx 25rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.items_right { background-color: #FFF3EB; }
.items_right2 { background-color: #F2F2F2; }

.items_right_top { font-size: 32rpx; font-weight: 500; }
.items_right_mid { color: #666; }
.items_right_bottom { font-size: 24rpx; }

.status-tag {
  padding: 5rpx 15rpx;
  background-color: #FF5757;
  color: white;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 已结束状态图片样式 */
.items_right_bottom image {
  width: 120rpx;
  height: 40rpx;
  margin-left: 20rpx;
}
</style>